<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue - Demo</title>
    <!-- 引入vue -->
    <script src="js/vue.min.js"></script>
    <!-- 引入axios -->
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="demo">
        <table border="1">
            <tr>
                <th>序号</th>
                <th>讲师姓名</th>
                <th>讲师简介</th>
                <th>讲师资历</th>
                <th>头衔</th>
                <th>排序号</th>
                <th>创建时间</th>
                <th>更新时间</th>
            </tr>
            <tr v-for="(teacher, index) in teacherList">
                <td>{{index+1}}</td>
                <td>{{teacher.name}}</td>
                <td>{{teacher.intro}}</td>
                <td>{{teacher.career}}</td>
                <td>
                    <span v-if="teacher.level==1">高级讲师</span>
                    <span v-else-if="teacher.level==2">首席讲师</span>
                </td>
                <td>{{teacher.sort}}</td>
                <td>{{teacher.createTime}}</td>
                <td>{{teacher.updateTime}}</td>
            </tr>
        </table>
    </div>
    <script>
        // 创建一个vue对象
        new Vue({
            el: '#demo',    // 绑定vue作用的范围
            data: {         // 定义页面中显示的模型数据
                teacherList: []
            },
            created() {     // 在页面渲染之前执行
                // 获取教师列表
                this.getTeacherList()
            },
            mounted() {     // 在页面渲染之后执行
                
            },
            methods: {      // 定义多个方法
                getTeacherList() {
                    // 发送请求
                    axios.get("js/getTeacherList.json")
                         .then(response => { // 请求成功执行的方法，相当于ajax的success方法
                             console.log(response)
                             this.teacherList = response.data.data.items
                         })
                         .catch(error => { // 请求失败执行的方法，相当于ajax的error方法
                             console.log(error)
                         })
                }
            },
            components: {   // 定义多个局部组件
                
            }
        })
    </script>
</body>
</html>